<template>
  <div class="container">
    <el-dialog
      title="题目预览"
      :visible.sync="viewVisible"
      width="50%"
      :before-close="() => this.$emit('update:viewVisible', false)"
    >
      <div class="viewRow">
        <el-row :gutter="20">
          <el-col :span="6">
            <span>【题型】:</span>
            <span v-if="viewInfo.questionType === '1'">单选题</span>
            <span v-else-if="viewInfo.questionType === '2'">多选题</span>
            <span v-else>简答题</span>
          </el-col>
          <el-col :span="6">
            <span>【编号】:</span>
            <span>{{ viewInfo.id }}</span>
          </el-col>
          <el-col :span="6">
            <span>【难度】:</span>
            <span v-if="viewInfo.difficulty === 1">简单</span>
            <span v-else-if="viewInfo.difficulty === 2">一般</span>
            <span v-else>困难</span>
          </el-col>
          <el-col :span="6">
            <span>【标签】:</span>
            <span>{{ viewInfo.tags }}</span>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <span>【学科】:</span>
            <span>{{ viewInfo.subjectName }}</span>
          </el-col>
          <el-col :span="6">
            <span>【目录】:</span>
            <span>{{ viewInfo.directoryName }}</span>
          </el-col>
          <el-col :span="6">
            <span>【方向】:</span>
            <span>{{ viewInfo.direction }}</span>
          </el-col>
        </el-row>
        <hr />
        <el-row>【题干】:</el-row>
        <el-row>
          <span v-html="viewInfo.question" class="active"></span>
        </el-row>
        <el-row>
          <span v-if="viewInfo.questionType === '1'">
            <span>单选题</span>
            <span>选项：（以下选中的选项为正确答案）</span>
             <el-radio v-model="radio" label="1" v-for="item in viewInfo.options" :key="item.id">{{item.title}}</el-radio>
          </span>
          <span v-else-if="viewInfo.questionType === '2'">
            <span>多选题</span>
            <span>选项：（以下选中的选项为正确答案）</span>
            <el-checkbox-group v-model="checkList">
              <el-checkbox :label="item.title" v-for="item in viewInfo.options" :key="item.id"></el-checkbox>
            </el-checkbox-group>
          </span>
        </el-row>
        <hr />
        <el-row>
          <span class="videoAnsower">【参考答案】:</span>
          <el-button type="danger" @click="videoShow = !videoShow">视频答案预览</el-button>
          <div>
            <video :src="viewInfo.videoURL" controls autoplay v-if="videoShow"></video>
          </div>
        </el-row>
        <hr />
        <el-row>
          <span>【答案解析】:</span>
          <span v-html="viewInfo.answer" style="display: inline-block"></span>
        </el-row>
        <hr />
        <el-row>
          <span>【题目备注】:</span>
          <span>{{viewInfo.remarks}}</span>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="$emit('update:viewVisible', false)">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'previewIndex',
  components: {},
  props: {
    viewVisible: {
      type: Boolean,
      required: true
    },
    viewInfo: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      // checkList: [],
      videoShow: false
    }
  },
  watch: {
  },
  computed: {
    checkList () {
      const list = []
      this.viewInfo.options.forEach(item => {
        if (item.isRight === 1) {
          list.push(item.title)
        }
      })
      return list
    },
    radio () {
      let i = ''
      this.viewInfo.options.forEach(item => {
        if (item.isRight === 1) {
          i = item.title
        }
      })
      return i
    }
  },
  created () {
  },
  mounted () {
  },
  methods: {
  }
}
</script>

<style scoped lang='scss' rel="stylesheet/scss">
.viewRow {
  .el-row {
    margin-bottom: 10px;
  }
}
.active {
  color: green;
}
.el-checkbox,
.el-radio {
  display: block;
  margin: 10px;
}
.videoAnsower {
  margin-right: 10px;
}
video {
  width: 400px;
  height: 300px;
}
</style>
